<template>
  <div class="payment">
    <div class="page-head">
      <div class="back-content" @click="goBack">
        <span class="icon iconfont back">&#xe6dc;</span>
      </div>
      <div class="page-head-title">TOP-UP</div>
      <div class="question-circle-icon" @click="queryShow = true">
        <span class="icon iconfont query">&#xe622;</span>
      </div>
    </div>
    <div class="pay-title">Choose top-up amount</div>
    <div class="page-content">
      <div class="price-list">
        <div
          class="price-item"
          @click="form.selectedPrice = item.price"
          v-for="(item, index) in priceList"
          :key="index"
          :class="{ 'price-item-active': form.selectedPrice == item.price }"
        >
          <div class="price-text">$ {{ item.price }}</div>
          <!---->
        </div>
      </div>
    </div>
    <div class="pay-title">Please select mode of payment</div>

    <div class="pay-content">
      <div>
        <div class="pay-row" :class="{ 'pay-row-active': sedItem == 'paypal' }">
          <div class="select-item" @click="selectItem('paypal')"></div>
          <div class="pay-name">Paypal</div>
          <div class="pay-icon-content">
            <img
              class="pay-icon"
              style="width: 70px"
              src="static/img/main/paypal.svg"
              draggable="false"
            />
          </div>
        </div>
        <div class="pay-row pay-row-tip" v-show="sedItem == 'paypal'">
          <div>
            <span
              >a. The single recharge limit is 200 USD. <br />b. The number of
              successful recharges shall not exceed 3. <br />c. If you need to
              continue to recharge, please contact customer service.</span
            >
          </div>
        </div>
      </div>
      <div>
        <div
          class="pay-row"
          :class="{ 'pay-row-active': sedItem == 'coinbase' }"
        >
          <div class="select-item" @click="selectItem('coinbase')"></div>
          <div class="pay-name">Coinbase</div>
          <div class="pay-icon-content">
            <img
              class="pay-icon"
              style="width: 20px"
              src="static/img/main/btb.png"
              draggable="false"
            />
            <img
              class="pay-icon"
              style="width: 20px"
              src="static/img/main/ytf.png"
              draggable="false"
            />
            <img
              class="pay-icon"
              style="width: 20px"
              src="static/img/main/ltb.png"
              draggable="false"
            />
          </div>
        </div>
        <div class="pay-row pay-row-tip" v-show="sedItem == 'coinbase'">
          <div>
            <span
              >a. The minimum recharge amount for a single transaction is 50 USD
              <br />b. Unlimited recharge, and 5% recharge amount will be given
              away <br />c.Please select Ethereum (ERC20), the arrival time is
              about 5 minutes</span
            >
          </div>
        </div>
      </div>
      <div>
        <div class="pay-row" :class="{ 'pay-row-active': sedItem == 'card' }">
          <div class="select-item" @click="selectItem('card')"></div>
          <div class="pay-name">Credit Card(V/M)</div>
          <div class="pay-icon-content">
            <img
              class="pay-icon"
              style="width: 66px"
              src="static/img/main/visad.svg"
              draggable="false"
            />
            <img
              class="pay-icon"
              style="width: 32px"
              src="static/img/main/master.svg"
              draggable="false"
            />
          </div>
        </div>
        <div class="pay-row pay-row-tip" v-show="sedItem == 'card'">
          <div>
            <span
              >a. The minimum recharge amount for a single transaction is 10 USD
              <br />b. The maximum recharge amount for a single transaction is
              200 USD <br />c. The number of successful recharges shall not
              exceed 3 <br />d. If you need to continue to recharge, please
              contact customer service.</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="btn-row-sub"></div>
    <div class="btn-row">
      <div class="btn-row-agreement">
        <div class="check-content check-content-active"></div>
        <div>Agree to</div>
        <span class="agreement-btn" @click="goPayAgreement"
          >"User recharge agreement"</span
        >
      </div>
      <div class="btn-item" @click="recharge">TOP-UP</div>
    </div>
    <van-dialog v-model="show" title="Tips">
      <div class="content">Please enter the withdrawal amount</div>
    </van-dialog>
    <van-popup v-model="queryShow"
      ><div class="tip-content">
        <div class="close-content" @click="queryShow = false">
          <span class="icon iconfont close">&#xe748;</span>
        </div>
        <div class="content">
          <div class="_undefined undefined">
            <div>
              <div style="position: relative">
                <p style="undefined">
                  <strong style="undefined">1. Paypal</strong
                  ><br style="undefined" />&nbsp; &nbsp;
                  <span style="color: #999999"
                    >a. The single recharge limit is 200 USD.
                  </span>
                </p>
              </div>
            </div>
            <!---->
            <div>
              <div style="position: relative">
                <p style="undefined">
                  <span style="color: #999999"
                    >&nbsp; &nbsp; b. The number of successful recharges shall
                    not exceed 3.
                  </span>
                </p>
              </div>
            </div>
            <!---->
            <div>
              <div style="position: relative">
                <p style="undefined">
                  <span style="color: #999999"
                    >&nbsp; &nbsp; c. If you need to continue to recharge,
                    please contact customer service.
                  </span>
                </p>
              </div>
            </div>
            <!---->
            <div>
              <div style="position: relative">
                <p style="undefined">
                  <strong style="undefined">2. Credit Cards (mb_pay) </strong>
                </p>
              </div>
            </div>
            <!---->
            <div>
              <div style="position: relative">
                <p style="undefined">
                  &nbsp; &nbsp;
                  <span style="color: #999999"
                    >a. The minimum recharge amount for a single transaction is
                    10 USD
                  </span>
                </p>
              </div>
            </div>
            <!---->
            <div>
              <div style="position: relative">
                <p style="undefined">
                  <span style="color: #999999"
                    >&nbsp; &nbsp; b. The maximum recharge amount for a single
                    transaction is 200 USD &nbsp; &nbsp;
                  </span>
                </p>
              </div>
            </div>
            <!---->
            <div>
              <div style="position: relative">
                <p style="undefined">
                  <span style="color: #999999"
                    >&nbsp; &nbsp; c. The number of successful recharges shall
                    not exceed 3</span
                  >
                </p>
              </div>
            </div>
            <!---->
            <div>
              <div style="position: relative">
                <p style="undefined">
                  <span style="color: #999999"
                    >&nbsp; &nbsp; d. If you need to continue to recharge,
                    please contact customer service.</span
                  >
                </p>
              </div>
            </div>
            <!---->
            <div>
              <div style="position: relative">
                <p style="undefined">
                  <strong style="undefined"
                    >3. The recharged balance can be used to purchase blind
                    boxes on the Rolling Box blind box platform;</strong
                  >
                </p>
              </div>
            </div>
            <!---->
            <div>
              <div style="position: relative">
                <p style="undefined">
                  <strong style="undefined"
                    >4. The recharged balance will not expire, but it cannot be
                    transferred to others;</strong
                  >
                </p>
              </div>
            </div>
            <!---->
            <div>
              <div style="position: relative">
                <p style="undefined">
                  <strong style="undefined"
                    >5. The consumption behavior of minors must obtain the
                    consent of their parents or legal guardians in advance, and
                    consume under the supervision of the guardian;</strong
                  >
                </p>
              </div>
            </div>
            <!---->
            <div>
              <div style="position: relative">
                <p style="undefined">
                  <strong style="undefined"
                    >6. Note that it can sometimes take up to
                    <span style="color: #2dc26b">15 minutes</span>
                    to&nbsp;process your payment。</strong
                  >
                </p>
              </div>
            </div>
          </div>
        </div>
      </div></van-popup
    >
  </div>
</template>
  
  <script>
export default {
  name: "withdraw",
  data() {
    return {
      show: false,
      queryShow: false,
      withdrawAmount: undefined,
      rData:{
        url:"",
        orderId:null
      },
      priceList: [
        {
          price: 5,
        },
        {
          price: 10,
        },
        {
          price: 50,
        },
        {
          price: 100,
        },
        {
          price: 200,
        },
        {
          price: 500,
        },
      ],
      bankOpts: [
        {
          field: "Name of payees",
        },
        {
          field: "Receiving bank account",
        },
        {
          field: "Routing Code",
        },
        {
          field: "SWIFT Code",
        },
        {
          field: "Recipient bank",
        },
        {
          field: "Bank address",
        },
      ],
      sedItem: "paypal",
      form: {
        name: "",
        banckAccount: "",
        routingCode: "",
        swiftCode: "",
        repBank: "",
        bankAddr: "",
        selectedPrice: 5,
      },
    };
  },
  methods: {
    recharge() {
      this._showLoading();
      this.$http
        .put(`api/v1/wallet/recharge`, {
          amount: this.form.selectedPrice,
        })
        .then(async (res) => {
          this._dismissLoading();
          if (res.data && res.data.isSuccess) {
            this.rData = res.data.resultData
            window.location.href=this.rData.url
          } else {
            this._showToast(res.data.message);
          }
        })
        .catch((err) => {
          this._dismissLoading();
          this._showToast(err.message);
        });
    },
    selectItem(item) {
      this.sedItem = item;
    },
    goBack() {
      this.$router.go(-1);
    },
    goPayAgreement() {
      this.$router.push({
        name: "payAgreement",
      });
    },
    submit() {
      this.show = true;
      // Dialog.alert({
      //   title: "Tips",
      //   message: "Withdrawal amount error",
      // }).then(() => {
      //   // on close
      // });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.payment {
  color: var(--text-color);
  box-sizing: border-box;

  height: 100%;

  background: var(--main-bc-color);
  .pay-title {
    padding: 11px 16px;
    font-weight: 700;
    margin-top: 50px;
  }
  .page-content {
    width: 100%;
    margin: auto;
    padding: 16px 11px;
    box-sizing: border-box;
    background-color: var(--content-bc);
    .price-list {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      margin-top: 16px;
      .price-item-active {
        color: #00dcab !important;
        background-color: rgba(0, 220, 171, 0.2) !important;
      }
      // .price-item:hover {
      //   color: #00dcab;
      //   background-color: rgba(0, 220, 171, 0.2);
      // }
      .price-item {
        width: 119px;
        height: 77px;
        margin: 5px;
        background-color: var(--main-bc-color);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: #999;
        border-radius: 6px;
        transition: 0.3s;
        width: 30%;
        .price-text {
          font-family: fantasy;
          font-size: 17px;
        }
      }
    }
  }
  .pay-title {
    padding: 11px 16px;
    font-weight: 700;
  }
  .pay-content {
    width: 100%;
    margin: auto;
    box-sizing: border-box;
    background-color: var(--content-bc);
    .pay-row-active .select-item {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #00dcab !important;
    }
    .pay-row-active .select-item::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 100%;
      background-color: #00dcab;
    }
    .pay-row-tip {
      color: #f44;
      font-size: 13px;
    }
    .pay-row {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      min-height: 57px;
      padding: 5px 15px;
      border-bottom: 1px solid var(--main-color-0_1);
      box-sizing: border-box;
      cursor: pointer;
      .pay-name {
        margin-right: auto;
      }
      .pay-icon-content {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .pay-icon {
          margin-left: 10px;
          width: 46px;
          height: 20px;
        }
      }
      .select-item {
        width: 13px;
        height: 13px;
        border-radius: 100%;
        border: 1.5px solid #76797b;
        margin-right: 20px;
      }
    }
  }
  .btn-row-sub {
    width: 100%;
    height: 99px;
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .btn-row {
    .btn-item {
      width: 391px;
      height: 54px;
      border-radius: 6px;
      background-color: #3a83ed;
      font-size: 17px;
      font-weight: 500;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    width: 100%;
    height: 99px;
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    background-color: var(--content-bc);
    .btn-row-agreement {
      margin-bottom: 7px;
      display: flex;
      justify-content: center;
      align-items: center;
      .check-content-active {
        background-color: #00dcab;
      }
      .agreement-btn {
        color: #00dcab;
      }
    }
  }
  .tip-content {
    width: 342px;
    padding: 16px 11px;
    box-sizing: border-box;
    background: var(--content-bc);
    border-radius: 6px;
    font-size: 13px;
    position: relative;
    .close-content {
      position: absolute;
      top: 5px;
      right: 5px;
      z-index: 1;
    }
    .content {
      overflow: auto;
    }
  }
  color: var(--text-color);
  box-sizing: border-box;
  .page-head {
    padding-top: calc(0px);
    height: 50px;
    background: var(--content-bc);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 0;
    //   padding-right: 40px;
    font-size: 14px;
    font-weight: 400;
    color: var(text-color);
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    .back-content {
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      .back {
        font-size: 22px;
      }
    }
    .page-head-title {
      font-size: 16px;
      font-weight: 500;
      margin: auto;
    }
    .question-circle-icon {
      width: 66px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .query {
        font-size: 22px;
      }
    }
  }
  .page-head-sub {
    width: 100%;
    height: 50px;
    padding-top: calc(0px);
  }
  .form-content {
    width: 100%;
    background-color: var(--content-bc);
    padding: 20px 12px;
    margin-top: 15px;
    box-sizing: border-box;
    .price-row {
      padding: 10px 0;
      .price-tip {
        font-size: 14px;
        padding: 5px 0;
        color: #999;
        .all-price {
          color: #f44;
          margin-left: 5px;
          font-size: 18px;
        }
      }
    }
    .input-row {
      width: 100%;
      height: 44px;
      border: 1px solid #999;
      border-radius: 6px;
      margin-bottom: 10px;
      position: relative;
      transition: 0.3s;
    }
    .input-row:hover {
      width: 100%;
      height: 44px;
      border: 1px solid var(--text-color);
      border-radius: 6px;
      margin-bottom: 10px;
      position: relative;
      transition: 0.3s;
    }
    .submit-btn {
      width: 100%;
      height: 44px;
      border-radius: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      color: #fff;
      margin-top: 30px;
      background: linear-gradient(98deg, #f48836, #f4364c 100%);
    }
  }
}
</style>
  
  
  .<style lang="scss">
.payment {
  .van-popup {
    position: fixed;
    max-height: 100%;
    overflow-y: auto;
    background-color: var(--content-bc);
    transition: transform 0.3s;
    -webkit-overflow-scrolling: touch;
    border-radius: 6px;
  }
  .van-dialog {
    background: var(--content-bc);
    color: var(--text-color);
    .content {
      text-align: center;
      /* width: 131px; */
      margin: o auto;
      margin: 0 auto;
    }
  }
  .van-dialog__confirm,
  .van-dialog__confirm:active {
    background: var(--content-bc);
    color: var(--text-color);
  }
  .box {
    // width: 450px;
    background: #fff;
    // padding: 30px;
    // box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 0 0 0 5px;
    background: var(--conten-bc);
  }

  .box .input_data {
    height: 30px;
    width: 100%;
    position: relative;
    margin-top: 10px;
  }

  .box .input_data input {
    display: block;
    height: 100%;
    width: 100%;
    border: none;
    // font-size: 16px;
    // border-bottom: 2px solid silver;
    background: var(--content-bc);
    color: var(--text-color);
    font-size: 12px;
  }

  .input_data input:focus,
  .input_data input:valid {
    outline: 0;
    // border-bottom-color: #4158d0;
  }

  .input_data input:focus ~ label,
  .input_data input:valid ~ label {
    transform: translateY(-12px);
    font-size: 12px;
    color: grey;
  }

  .box .input_data label {
    position: absolute;
    bottom: 10px;
    left: 0;
    color: grey;
    pointer-events: none;
    transition: all 0.3s ease;
  }

  .vs-input {
    margin: 5px;
    margin-top: 20px;
  }
  .van-cell {
    background: var(--content-bc);
    border-bottom: 1px solid hsla(0, 0%, 50.2%, 0.8);
  }
  .van-field__label {
    color: var(--text-color);
    font-size: 22px;
    width: 20px;
  }
  .van-field__control {
    color: var(--text-color);
    font-size: 27px;
  }
  .van-field__control::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #999;
  }
}
</style>